<script setup lang="ts">
import {ref} from "vue";
import {getSearch} from "@/api/more";


const searchName=ref('')
let infoList = ref()
let infoList2 = ref()

// const props = defineProps(['type'])
// console.log(props)
function jump(){
    getSearch().then(res=>{
        infoList.value =res.rows.filter(item =>{
            // console.log(item)
            infoList2.value = item.jsBusinessType
        })


    })

}
</script>

<template>
    <div v-for="item in infoList" :key="item"></div>
    <div>

        <!--搜索-->
        <div class="Box">
            <div class="searchBox">
                <div style="margin-top: 5px;">
                    <img src="@/assets/images/search.png" alt=""/>
                    <input type="text" placeholder="全局搜索" v-model="searchName">
                    <router-link to="/jump">
                        <button @click="jump()">搜索</button>
                    </router-link>
                </div>
                <router-link to="/PersoalAplyAndPublish">
                    <img src="@/assets/images/bell.png" alt="" class="smallBell">
<!--                    <div class="numberOfMessages"></div>-->
                </router-link>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.Box{
    width: 100%;
    height: 40px;
    overflow: hidden;
    .searchBox{
        width: 300px;
        height: 40px;
        margin-left: 10px;
        position: relative;

        img{
            width: 16px;
            height: 16px;
            position: absolute;
            left: 5px;
            top: 7px;
        }
        input{
            width: 200px;
            height: 30px;
            padding-left: 20px;
            border-style: none;
            background-color: #f4f4f6;
            border-radius: 10px 0px 0px 10px;
        }
        button{
            width: 50px;
            height: 30px;
            color: white;
            border-style: none;
            background-color: #c81127;
            vertical-align: middle;
            border-radius: 0px 10px 10px 0px;
        }
        .smallBell{
            width: 30px;
            height: 30px;
            position: absolute;
            left: 275px;
            top: -2px;
        }
        .numberOfMessages{
            position: absolute;
            top: 0;
            right: 0;
            width: 13px;
            height: 13px;
            background-color: #c81127;
            border-radius: 50%;
        }
    }
}

</style>